<template>
	<view class="">
		<!-- 步骤一 -->
		<view  class="box-c d-ai-c regist">
			<!-- <view class="box-c step">
				<view class="step1-icon box">
					<text class="iconfont iconzhuce1"></text>
					<view class="step-line"></view>
					<text class="iconfont iconbuzoukong"></text>
					<view class="step-line"> </view>
					<text class="iconfont iconbuzoukong"></text>
				</view>
				<view class="step1-text box">
					<text class="flex-1 text-center">
						注册账号
					</text>
					<text class="flex-1 text-center">
						完善信息
					</text>
					<text class="flex-1 text-center">
						爱好需求
					</text>
				</view>


			</view> -->
			<view class="step-2">
				<view class="step-2-lab user-logo box-c d-ai-c">
									<image :src="image =='' ? '../../static/images/user/user_login.png' : image" mode="widthFix"
										@tap='chooseImage()'></image>
									<view class="box-c d-ai-c logo-text">
										<text>点击更换头像</text>
										
									</view>
								</view>
				<!-- 输入框 -->
				<view class="step-2-lab">
					<view class="title">
						帐号
					</view>
					<view class="">
						<input maxlength="10" v-model="parameter.account" type="text" placeholder-style="color:#b9b9b9;"
							placeholder="填写帐号(仅支持字母、数字、下划线)" />
					</view>
					<view class="input-line"></view>
				</view>
				<view class="step-2-lab">
					<view class="box step-2-lab-user">
						<text class="">性别</text>
						<view class="sex-view">
							<text @tap='changeSex(1)' :class="sexActive ==1 ? 'sex-active' :''">
								<text :class="sexActive ==1 ? 'sex-active' :''" class="iconfont iconnan"></text>
								<text :class="sexActive ==1 ? 'sex-active' :''">男</text>
							</text>
							<text @tap='changeSex(2)' :class="sexActive ==2 ? 'sex-active' :''">
								<text :class="sexActive ==2 ? 'sex-active' :''" class="iconfont iconnv"></text>
								<text :class="sexActive ==2 ? 'sex-active' :''">女</text>
							</text>
						</view>
					</view>
					<view class="input-line"></view>
				</view>
				<view class="step-2-lab">
					<view class="box step-2-lab-user">
						<text>姓名</text>
						<view class="">
							<input maxlength="8" v-model="parameter.nickName" type="text"
								placeholder-style="color:#b9b9b9;" placeholder="请填写您的真实姓名" value="" />
						</view>
					</view>
					<view class="input-line"></view>
				</view> 
				<view class="step-2-lab" v-show="num==='3'?false:true">
					<view class="title">
						手机号
					</view>
					<view class="box">
						<input class="phone" maxlength="11" v-model="parameter.phone" type="text" placeholder-style="color:#b9b9b9;"
							placeholder="请填写手机号" />
							<text v-if="timeFlag" class="time btn-code">
								{{timeCount}}
							</text>
							<text @tap="getCode" v-else class="getCode btn-code">
								获取验证码
							</text>
					</view>
					<view class="input-line"></view>
				</view>
				<view class="step-2-lab animated fadeIn"  v-show="verificationFlag">
					<view class="title">
						验证码
					</view>
					<view class="">
						<input maxlength="6"  v-model="parameter.verification" type="text" placeholder-style="color:#b9b9b9;"
							placeholder="请填写验证码" />
					</view>
					<view class="input-line"></view>
				</view>

				<view class="step-2-lab">
					<view class="title">
						登录密码
					</view>
					<view class="">
						<input maxlength="20" v-model="parameter.password" type="password" placeholder-style="color:#b9b9b9;"
							placeholder="请填写密码" value="" />
					</view>
					<view class="input-line"></view>
				</view>
				<!-- <view class="step-2-lab">
					<view class="title">
						确认密码
					</view>
					<view class="">
						<input maxlength="20" v-model="parameter.password2" type="password" placeholder-style="color:#b9b9b9;"
							placeholder="请再次填写密码" value="" />
					</view>
					<view class="input-line"></view>
				</view> -->
			</view>

			<view class="step-3">
				<button type="default" @tap="nextStep">注册</button>

			</view>

		</view>
		<!-- 步骤二 -->
		<!-- <view v-if="step == 2" class="box-c d-ai-c regist"> -->
			<!-- <view class="box-c step">
				<view class="step1-icon box">
					<text class="iconfont iconbuzhou"></text>
					<view class="step-line"></view>
					<text class="iconfont iconzhuce2"></text>
					<view class="step-line"> </view>
					<text class="iconfont iconbuzoukong"></text>
				</view>
				<view class="step1-text box">
					<text class="flex-1 text-center">
						注册账号
					</text>
					<text class="flex-1 text-center">
						完善信息
					</text>
					<text class="flex-1 text-center">
						爱好需求
					</text>
				</view>


			</view> -->
			<!-- <view class="step-2">
				<view class="step-2-lab user-logo box-c d-ai-c">
					<image :src="image =='' ? '../../static/images/user/user_login.png' : image" mode="widthFix"
						@tap='chooseImage()'></image>
					<view class="box-c d-ai-c logo-text">
						<text>点击更换头像</text>
						
					</view>
				</view> -->
				<!-- 输入框 -->
				<!-- <view class="step-2-lab">
					<view class="box step-2-lab-user">
						<text>姓名</text>
						<view class="">
							<input maxlength="8" v-model="parameter.nickName" type="text text-input"
								placeholder-style="color:#b9b9b9;" placeholder="请填写您的真实姓名" value="" />
						</view>
					</view>
					<view class="input-line"></view>
				</view>

				<view class="step-2-lab">
					<view class="box step-2-lab-user">
						<text class="">性别</text>
						<view class="sex-view">
							<text @tap='changeSex(1)' :class="sexActive ==1 ? 'sex-active' :''">
								<text :class="sexActive ==1 ? 'sex-active' :''" class="iconfont iconnan"></text>
								<text :class="sexActive ==1 ? 'sex-active' :''">男</text>
							</text>
							<text @tap='changeSex(2)' :class="sexActive ==2 ? 'sex-active' :''">
								<text :class="sexActive ==2 ? 'sex-active' :''" class="iconfont iconnv"></text>
								<text :class="sexActive ==2 ? 'sex-active' :''">女</text>
							</text>
						</view>
					</view>
					<view class="input-line"></view>
				</view>

				<view class="step-2-lab">
					<view class="box step-2-lab-user">
						<text>身份证</text>
						<view class="">
							<input maxlength="18" v-model="parameter.cardNo" type="text text-input" placeholder-style="color:#b9b9b9;"
								placeholder="请输入您的填写证号" value="" />
						</view>
					</view>
					<view class="input-line"></view>
				</view>


			</view>

			<view class="step-3">
				<button type="default" @tap="nextStep(3)">下一步</button>

			</view>

		</view> -->

		<!-- <view v-if="step == 3" class="box-c d-ai-c regist ">
			<view class="box-c step animated fadeIn">
				<view class="step1-icon box">
					<text class="iconfont iconbuzhou"></text>
					<view class="step-line"></view>
					<text class="iconfont iconbuzou2"></text>
					<view class="step-line"> </view>
					<text class="iconfont iconzhuce3"></text>
				</view>
				<view class="step1-text box">
					<text class="flex-1 text-center">
						注册账号
					</text>
					<text class="flex-1 text-center">
						完善信息
					</text>
					<text class="flex-1 text-center">
						爱好需求
					</text>
				</view>


			</view>
			<view class="step-2">
				<view class="hobby-list-1 box d-jc-c">
					<text>
						请选择您的兴趣爱好以及您的需求
					</text>
				</view>

				<view class="hobby-list-2 box d-jc-c">
					<text>
						完善爱好和需求，方便为您提供更多服务
					</text>
				</view>
				<view class="box d-jc-sb hobby-list-3">
					<text class="flex-2">兴趣爱好</text>
					<text v-if="xingqu !=''" @tap='openMask(1)' class="checkText flex-6">
						{{xingqu}}
					</text>
					<text v-else @tap='openMask(1)'>
						<text>请选择</text>
						<text class="iconfont iconqianjin"></text>
					</text>

				</view>

				<view class="box d-jc-sb hobby-list-4">
					<text class="flex-2">服务需求</text>
					<text v-if="aihao !=''" @tap='openMask(2)' class="checkText flex-6">
						{{aihao}}
					</text>
					<text v-else @tap='openMask(2)'>
						<text>请选择</text>
						<text class="iconfont iconqianjin"></text>
					</text>

				</view>



			</view>

			<view class="step-3">
				<button type="default" @tap="submit">完成</button>

			</view>


		</view> -->
		<view class="">
			<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200"
				:height="200"></kps-image-cutter>
		</view>

		<!-- <uni-popup ref="popup">
			<view class="popup-card">
				<view class="">
					<scroll-view scroll-y="true" style="height: 750rpx;">
						<view class="" v-for="(hobby,index) in hobbyList" :key="index">
							<view class="box d-flex" @tap='check(hobby.id,hobby.value,hobby.type)'>
								<view class="flex-1">
									<text class="iconfont icondagou"
										v-if="checkActive == hobby.id || checkActive2 == hobby.id ">
									</text>
								</view>
								<view class="scroll-view-item list flex-12">
									{{hobby.value}}
								</view>
							</view>
							<view class="line">

							</view>
						</view>

					</scroll-view>
					<view class="subBtn">
						<text @tap='closePop()' >确定</text>
					</view>
				</view>
				
			</view>

		</uni-popup>
 -->
	</view>

</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				step: 1, // 步骤条激活
				sexActive: 1, //性别激活切换
				parameter: {
					// sex: '',
					// verificationType: '2',
					type:1,
					phone: '',
					nickName:'',
					password:''
				},
				hobbyList: [],
				checkActive: '',
				checkActive2: '',
				hobby: {
					type: ''
				},
				xingqu: '',
				aihao: '',
				image: '',
				url: "",
				timeFlag: false,
				code:{
					
				},
				totalTime: 59,
				timeCount: '',
				verificationFlag:false,
				num:'',
				certificate:''
			}
		},
		onBackPress(e) {
			return this.backStep();

		},
		onLoad(option) {
			this.num = option.num
			this.certificate = option.certificate
		},
		methods: {
			//凭证注册
			register() {
				console.log(this.parameter)
				this.$api_common.register({
					type:2,
					certificate:this.certificate,
					nickName:this.parameter.nickName,
					sex:this.sexActive,
					image:this.image,
					password:this.parameter.password
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '注册成功',
							duration: 1000,
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: 'login'
							})
						}, 800);
			
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: 'none'
						})
					}
				})
			
			},
			getCode() {
				if (!(/^1[3456789]\d{9}$/.test(this.parameter.phone))) {
					uni.showToast({
						title: '手机号填写有误',
						duration: 1000,
						icon: "none"
					});
					return
				}
				this.$api_common.getVerificationCode({
					type:2,
					phone:this.parameter.phone
				}).then((res) => {
					if (res.data.code == 200) {
						this.timeFlag = true
						this.verificationFlag=true
						this.timeCount = this.totalTime + 's'
						let clock = setInterval(() => {
							this.totalTime--
							this.timeCount = this.totalTime + 's'
							if (this.totalTime < 0) { //当倒计时小于0时清除定时器
								clearInterval(clock)
								this.timeFlag = false
								this.totalTime = 59
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
				})
			
			
			
			},
			onok(ev) {
				let _this = this
				this.path = ev.path;
				this.url = "";
				console.log(JSON.stringify(this.path))
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: this.path,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success: function(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data.dataMap)
						_this.image = data.dataMap
						console.log("------" + _this.image)
					}
				});
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
				console.log("====oncancle=====")

			},
			chooseImage() {
			    uni.chooseImage({
			        success: (res) => {
			            // 设置url的值，显示控件
			            this.url = res.tempFilePaths[0];
			        }
			    });
			},
			closePop(){
				this.$refs.popup.close()
			},
			check(id, value, type) {
				if (this.checkActive == id || this.checkActive2 == id) {
					this.$refs.popup.close()
				}
				if (type == 1) {
					this.xingqu = value
					this.checkActive = id
				}
				if (type == 2) {
					this.aihao = value
					this.checkActive2 = id
				}
			},
			openMask(type) {
				this.$refs.popup.open()
				this.hobby.type = type
				this.$api.loadRegisterUser(this.hobby).then((res) => {
					this.hobbyList = res.data.data

				})

			},
			//普通注册
			submit() {
				this.parameter.sex = this.sexActive
				// let hobby = []
				// hobby.push(this.checkActive)
				// hobby.push(this.checkActive2)
				// if(this.checkActive==''){
				// 	uni.showToast({
				// 		title: '请选择兴趣',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if(this.checkActive2==''){
				// 	uni.showToast({
				// 		title: '请选择服务需求',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.parameter.hobby = JSON.stringify(hobby)
				this.parameter.image = this.image
				console.log(this.parameter)
				this.$api_common.register(this.parameter).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '注册成功',
							duration: 1000,
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: 'login'
							})
						}, 800);

					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: 'none'
						})
					}
				})

			},
			backStep() {
				this.step--
				if (this.step < 1) {
					return false;
				}
				return true

			},
			nextStep() {
				// let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				// let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
			
				// if (step == 2) {
					if (this.parameter.account == null || this.parameter.account == '') {
						uni.showToast({
							title: '请输入用户名',
							duration: 1000,
							icon: "none"
						});
						return
					}
					if (!(/^[a-zA-Z0-9_]{0,}$/.test(this.parameter.account))) {
						uni.showToast({
							title: '用户名不能含有中文或特殊字符',
							duration: 1000,
							icon: "none"
						});
						return
					}
					
					if (this.parameter.password == null || this.parameter.password == '') {
						uni.showToast({
							title: '密码不能为空',
							duration: 1000,
							icon: "none"
						});
						return
					}
					console.log(this.parameter.password.length)
					if (this.parameter.password.length <6) {
						uni.showToast({
							title: '密码长度大于6位',
							duration: 1000,
							icon: "none"
						});
						return
					}
					if (!(/^[a-zA-Z0-9_]{0,}$/.test(this.parameter.password))) {
						uni.showToast({
							title: '密码不能含有中文或特殊字符',
							duration: 1000,
							icon: "none"
						});
						return
					}
					// if (this.parameter.password != this.parameter.password2) {
					// 	uni.showToast({
					// 		title: '账号和密码不一致',
					// 		duration: 1000,
					// 		icon: "none"
					// 	});
					// 	return
					// }
						if (this.parameter.nickName == null || this.parameter.nickName == '') {
							uni.showToast({
								title: '请输入真实姓名',
								duration: 1000,
								icon: "none"
							});
							return
						}
					// this.step = step

				// } 
				// else if (step == 3) {
				// 	if (this.parameter.nickName == null || this.parameter.nickName == '') {
				// 		uni.showToast({
				// 			title: '请输入真实姓名',
				// 			duration: 1000,
				// 			icon: "none"
				// 		});
				// 		return
				// 	}
				// 	if (this.parameter.cardNo == null || this.parameter.cardNo == '') {
				// 		uni.showToast({
				// 			title: '请输入身份证',
				// 			duration: 1000,
				// 			icon: "none"
				// 		});
				// 		return
				// 	}
				// 	if ( !_IDRe18.test(this.parameter.cardNo) && !_IDre15.test( this.parameter.cardNo)) {
				// 		uni.showToast({
				// 			title: '身份证号码不正确',
				// 			duration: 1000,
				// 			icon: "none"
				// 		});
				// 		return
				// 	}
					if (this.image == null || this.image == '') {
						uni.showToast({
							title: '请上传头像',
							duration: 1000,
							icon: "none"
						});
						return
					}
					if(this.num==='3'){
						this.register()
					}else{
						if (this.parameter.phone == null || this.parameter.phone == '') {
							uni.showToast({
								title: '请输入手机号',
								duration: 1000,
								icon: "none"
							});
							return
						}
						if (!(/^1[3456789]\d{9}$/.test(this.parameter.phone))) {
							uni.showToast({
								title: '手机号填写有误',
								duration: 1000,
								icon: "none"
							});
							return
						}
						if (this.parameter.verification == null ||this.parameter.verification =='' || this.parameter.verification ==undefined) {
							uni.showToast({
								title: '请先填写验证码',
								duration: 1000,
								icon: "none"
							});
							return
						}
						this.submit()
					}
				
				// 	this.step = step
				// }

			},
			changeSex(sex) {
				this.sexActive = sex

			}

		}
	}
</script>

<style>
	.subBtn{
		background-color: #FF5551;
		text-align: center;
		width: 100rpx;
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
		color: #fff;
		border-radius: 10rpx;
	}
	.time {
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		color: #b1b1b1;
	}
	.phone{
		position: relative;
		
	}
	.btn-code{
		position: absolute;
		right: 60rpx;
	}
	.hobby-list-3 {
		width: 180rpx;
	}

	.checkText {
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0rpx 25rpx 0 40rpx;
	}

	.checkActive {}

	.icondagou {
		color: #FF5551;
		font-size: 36rpx;
	}

	.line {
		background-color: #b9b9b9;
		height: 2rpx;
		width: 700rpx;
	}

	.list {
		font-size: 34rpx;
		padding: 10rpx 0rpx;

	}

	.popup-card {
		width: 700rpx;
		background-color: #ececec;
		height: 800rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 0 auto;
		color: #ff6a6a;

	}

	.hobby-list-4 text:last-child,
	.hobby-list-3 text:last-child {
		color: #999999;

	}

	.iconqianjin {
		font-size: 24rpx;
		padding: 0 20rpx 0 10rpx;
	}

	.hobby-list-3 {
		margin: 50rpx 0px 20px 0rpx;
	}

	.hobby-list-3,
	.hobby-list-4 {
		background-color: #FFF6F2;
		padding: 25rpx 15rpx;
		border-radius: 15rpx;

	}

	.hobby-list-4 text,
	.hobby-list-3 text {
		font-size: 30rpx;

	}

	.hobby-list-1 text {
		font-size: 42rpx;
		color: #FF7E51;
	}

	.hobby-list-2 text {
		font-size: 32rpx;
		color: #FF7E51;

	}

	.hobby-list-2 {
		margin-top: 30rpx;
	}

	.iconbuzhou,
	.iconzhuce2,
	.iconbuzou2,
	.iconzhuce3 {
		color: #FF5551;
	}

	.logo-text {
		color: #9a9a9a;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.user-logo {
		border-radius: 50%;
	}

	.user-logo image {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		border-radius: 50%;
	}

	.sex-active {
		background-color: #FF5551 !important;
		color: #FFFFFF !important;
	}

	.sex-view text {
		padding: 10rpx 0rpx 10rpx 5px;
		border-radius: 50rpx;
		color: #7a7a7a;
		background-color: #c8c8c8;
	}

	.sex-view {
		margin: 0 0 !important;
	}

	.step-2-lab-user view {
		margin-top: 10rpx;
	}

	.step-2-lab-user text {
		margin-right: 30rpx;
		font-size: 32rpx;
		width: 120rpx;

	}

	.step-2-lab-user {
		margin: 30rpx 0;


	}

	.text-input {
		margin-top: 5px !important;
	}

	.step-3 button {
		border-radius: 50rpx;
		background-color: #FF5551;
		margin-top: 90rpx;
		color: #FFFFFF;
	}

	.step-2-lab {
		margin-top: 30rpx;
	}

	.step-2,
	.step {
		margin-top: 30rpx;
	}

	.title {
		font-size: 32rpx;
		margin: 15rpx 0rpx;
		color: #161616;
	}

	.input-line {
		background-color: #d6d6d6;
		height: 3rpx;
		border-radius: 50rpx;
		margin-top: 10rpx;
	}

	.iconzhuce1 {
		color: #FF5551;
	}

	.iconbuzoukong {
		color: #cbcbcb;
	}

	.step1-icon text {
		font-size: 40rpx;
	}

	.step-line {
		height: 4rpx;
		background-color: #dedede;
		width: auto;
		margin-top: 32rpx;
		border-radius: 20rpx;
	}

	.step1-text {
		width: 600rpx !important;
	}

	.step1-text text {
		color: #cccccc;

	}

	.step1-icon {
		width: 450rpx !important;
		margin: 0 auto;
	}

	.step {
		width: 600rpx !important;
	}

	.regist view {
		width: 650rpx;

	}
</style>
